<template>
	<view class="bf-header">
		<!-- 选择区域 -->
		<view class="bf-header-location u-m-l-10 u-m-r-10" @click="showPickerFn">
			<text class="u-p-r-10">
			{{currentPcikUpArea?currentPcikUpArea:"选择区域"}}
			</text>
			<u-icon name="arrow-down-fill" color="grey" size="20"></u-icon>
		</view>
		<!-- 搜索框 -->
		<u-search 
		:clearabled="false" 
		input-align="left" 
		height="70" 
		@search="searchLocation"
		@custom="searchLocation"
		@blur="onBlurSearch"
		:value = "searchKeyword"
		class="bf-header-search">
		</u-search>
		<!-- 地区选择 此处选择单列模式 -->
		<u-picker mode="selector" v-model="showPciker" :default-selector="[0]" :range="findAllList"
			range-key="regionName" @confirm="findAllListConfirm">
		</u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	// 引入百度地图开发码和百度地图核心js 创建一个地图实例对象 参数为自己的ak码
	import {BAIDU_MAP_AK} from "../../common/const.js"
	const bmap = require ("../../common/bmap-wx.min.js")
	const BMap = new bmap.BMapWX({
		ak:BAIDU_MAP_AK
	})
	export default {
		name: "LocationHeader",
		props: ["searchKeyword"],
		data() {
			return {
				showPciker: false,
				 latitude: '',
				 longitude: '',
			};
		},
		computed: {
			...mapState("pickUpLocationModule", ["findAllList", "currentPcikUpArea"]),

		},
		methods: {
			...mapActions("pickUpLocationModule", ["getSysRegionFindAllListAction"]),
			...mapMutations("pickUpLocationModule",["setCurrentPickUpAreaMutation"]),
			//通过百度地图获取经纬度
			findAllListConfirm(index) {
				//这里需要通过获取的index找到对应的regionName 然后通过百度的接口获取对应的经纬度
				BMap.geocoding({
					address:this.findAllList[index],
					success:(data)=>{
						//成功调用接口 获取对应城市的经纬度
						let wxMarkerData = data.wxMarkerData; 
						this.latitude = wxMarkerData[0].latitude
						this.longitude = wxMarkerData[0].longitude
						// 将经纬度信息提交给父组件,通过父组件查询相关数据
						this.$emit("getSearchLeader",{latitude:this.latitude,longitude:this.longitude})
						//设置当前的提货点所在城市
						this.setCurrentPickUpAreaMutation(this.findAllList[index])
					},				
					fail:(e)=>{console.log(e);}
				})
			},
			//将查询内容转换成经纬度
			searchLocation(value){
				if(value&&value.trim().length>0){
					BMap.geocoding({
						address:value,
						success:(data)=>{
							//成功调用接口 获取对应城市的经纬度
							let wxMarkerData = data.wxMarkerData; 
							this.latitude = wxMarkerData[0].latitude
							this.longitude = wxMarkerData[0].longitude
							// 将经纬度信息提交给父组件,通过父组件查询相关数据
							this.$emit("getSearchLeader",{latitude:this.latitude,longitude:this.longitude})
						},				
						fail:(e)=>{console.log(e);}
					})
				}
			},
			//将搜索框输入的内容传递给父组件
			onBlurSearch(value){
				this.$emit("update:searchKeyword",value)
			},
			//showPciker=!showPciker
			showPickerFn(e){
				this.showPciker=!this.showPciker
				//这里之后想要优化 将标题栏的内容和keywords一起优化
			}
		},
		watch:{
			searchKeyword:{
				handler(newVal,oldVal){
					// console.log("searchKeyword",newVal,oldVal);
				}
				
			}
		},
		mounted() {
			this.getSysRegionFindAllListAction()
		}
	}
</script>

<style lang="scss" scoped>
	.bf-header {
		display: flex;
		align-items: center;
		justify-content: center;

		&-search {
			flex: 1;
		}

	}
</style>
